<template>
	<view style="background-color: #f2f2f2; min-height: 1200rpx">
		<!-- 上部分 -->
		<view class="top_block">
			<view class="login_block" style="margin-bottom: 50rpx">
				<view class="head_img">
					<image style="width: 100%;height: 100%;" src="../../static/login.png" mode=""></image>
				</view>
			</view>
			<view class="btn_block">
				<button size="mini" @click="login" style="
            width: 200rpx;
            line-height: 70rpx;
            height: 70rpx;
            font-size: 32rpx;
						padding: 0;
          ">
					{{ hasLogin ? '退出登录' : '登录' }}
				</button>
			</view>
		</view>
		<!-- 下部分 -->
		<view class="msg_block">
			<view class="msg_list">
				<view @click="goCollection">
					<view class="collect"></view>
					<text class="text">收藏</text>
				</view>
				<view>
					<view class="message"></view>
					<text class="text" @click="go">计划记录</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		computed: {
			// 判断登录状态
			hasLogin() {
				return this.$store.state.hasLogin
			}
		},
		methods: {
			login() {
				// 如果此时为登录状态，则点击为退出登录
				if(this.hasLogin) {
					this.$store.commit("logout");
				}
				uni.navigateTo({
					url: "/pages/login/login",
				});
			},
			// 跳转到计划行
			go() {
				uni.switchTab({
					url: "/pages/custom/index",
				});
			},
			// 跳转到收藏列表
			goCollection(){
				uni.navigateTo({
					url:"/pages/myuser/collection"
				});
			}
		},
	};
</script>

<style scoped>
	uni-page-body {
		height: 100%;
	}

	a {
		color: white;
		text-decoration: none;
	}

	.top_block {
		width: 750rpx;
		height: 380rpx;
		padding-top: 100rpx;
		margin: auto;
		border-bottom: 2rpx solid #a7a6a6;
		position: relative;
	}

	.top_block view {
		margin: auto;
	}

	.top_block .head_img {
		width: 150rpx;
		height: 150rpx;
	}

	.btn_block {
		text-align: center;
	}
	
	.btn_block /deep/ uni-button{
		background-color: #F2F2F2;
	}

	.msg_block {
		width: 750rpx;
		height: max-content;
	}

	.msg_list {
		margin: 0 15rpx;
	}

	.msg_list>view {
		position: relative;
		border-bottom: 2rpx solid #e2e2e2;
		color: #000;
		height: 64rpx;
		line-height: 64rpx;
		padding: 8rpx 0;
	}

	.msg_list .text {
		padding-left: 80rpx;
		font-size: 28rpx;
	}

	.collect,
	.message,
	.info {
		display: inline-block;
		position: absolute;
		width: 64rpx;
		height: 64rpx;
		vertical-align: middle;
		background-image: url("http://www.51houniao.com/wx/customer/classic/images/small_icon_28.png");
		background-repeat: no-repeat;
		background-size: 300rpx auto;
	}

	.collect {
		background-position: -154.6875rpx -4.6875rpx;
	}

	.message {
		background-position: -154.6875rpx -154.6875rpx;
	}

	.info {
		background-position: -154.6875rpx -232.6875rpx;
	}

	.visa {
		background-position: -154.6875rpx -302.6875rpx;
	}
</style>
